<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<script type="text/javascript" src="http://www.lovejavascript.com/js/jquery-2.1.4.min.js"></script>
	<link rel="stylesheet" type="text/css" th:href="@{/css/GridManager.css}">
	<script type="text/javascript" th:src="@{/js/GridManager.js}" ></script>
	<title>GridManager:jquery环境下渲染</title>
	<style>

		html, body{
			width: 100%;
			height: 100%;
			overflow-x:hidden;
			margin: 0px;
			padding: 0px;
		}
	</style>
</head>

<body>

<div class="search-area">
	<div class="sa-ele">
		<label class="se-title">发起人:</label>
		<input class="se-con" name="userId"/>
	</div>
	<div class="sa-ele">
		<button class="search-action">搜索</button>
		<button class="reset-action">重置</button>
	</div>
</div>
<br/>
<div class="dialog-demo">
	<table grid-manager="demoOne"></table>
</div>
<script type="text/javascript" >
    function remove(id){
        if(confirm("确定删除该流程实例?")){
            $.post("/flowable/instance/remove", {id:id},
                function(data,status){
                    $('table').GM('setQuery', null, function(){
                        console.log('刷新执行成功');
                    });
                }
            );
        }
    }
    // 绑定搜索事件
    document.querySelector('.search-action').addEventListener('click', function () {
        var _query = {
            userId: document.querySelector('[name="userId"]').value
        };
        $('table').GM('setQuery', _query, function(){
        });
    });

    // 绑定重置
    document.querySelector('.reset-action').addEventListener('click', function () {
        document.querySelector('[name="userId"]').value = '';
    });

    $('table').GM({
        supportRemind: false,
        gridManagerName: 'test',
//			,disableCache:true,
        height: '400px',
        supportAjaxPage:true,
        supportSorting: true,
        ajax_url: '/flowable/historic/list',
        ajax_type: 'POST',
        query: {},
        pageSize:20,
        columnData: [
            {key: 'action', remind: 'the action', text: '操作', width: '150px', template: function(action, rowObject){
                    return '<button class="plugin-action del-action" onclick="remove(\''+rowObject.id+'\')">删除</button>';
                }},
            {key: 'id', text: '流程ID', sorting: 'DESC', width: '100px'},
            {key: 'deploymentId', text: '部署ID'},
            {key: 'description', text: '说明', width: '200px'},
            {key: 'name', text: '名称', width: '120px'},
            {key: 'startTime', text: '发起时间'},
            {key: 'startUserId', text: '发起人'},
            {key: 'tenantId', text: '租户标识'},
            {key: 'businessKey', text: '业务Key'},
            {key: 'callbackId', text: '回调ID'},
            {key: 'callbackType', text: '回调类型'},
            {key: 'processDefinitionId', text: '流程ID'},
            {key: 'processDefinitionKey', text: '流程Key'},
            {key: 'processDefinitionName', text: '流程名称'},
            {key: 'processDefinitionVersion', text: '流程版本'}
        ],
        // 分页前事件
        pagingBefore: function(query){
            console.log('pagingBefore', query);
        },
        // 分页后事件
        pagingAfter: function(data){
            console.log('pagingAfter', data);
        },
        // 排序前事件
        sortingBefore: function (data) {
            console.log('sortBefore', data);
        },
        // 排序后事件
        sortingAfter: function (data) {
            console.log('sortAfter', data);
        },
        // 宽度调整前事件
        adjustBefore: function (event) {
            console.log('adjustBefore', event);
        },
        // 宽度调整后事件
        adjustAfter: function (event) {
            console.log('adjustAfter', event);
        },
        // 拖拽前事件
        dragBefore: function (event) {
            console.log('dragBefore', event);
        },
        // 拖拽后事件
        dragAfter: function (event) {
            console.log('dragAfter', event);
        }
    });


</script>
</body>
</html>
